<template>
	<view>
		<!-- 显示图像的元素 -->
		<image :src="pictureImage" v-if="pictureImage" mode="widthFix" style="width: 100%;" :show-menu-by-longpress="true">
		</image>
		<l-painter ref="posterRef" @success="painterSsuccess" isCanvasToTempFilePath performance path-type="url"
			custom-style="position: fixed; left: 200%">
		</l-painter>
	</view>
	
</template>
<script>
	export default {
		onLoad(options) {
			if (options.data) {
			    let obj = JSON.parse(decodeURIComponent(options.data));
				this.posterJson.views[0].views[0].src = obj.url;
				this.posterJson.views[0].views[1].views[0].text = obj.title;
				this.posterJson.views[1].views[0].src = obj.url;
				this.posterJson.views[1].views[1].views[0].text = obj.location;
				this.posterJson.views[1].views[2].views[0].text = obj.beginTime;
				this.posterJson.views[1].views[2].views[2].text = obj.endTime;
				this.posterJson.views[1].views[3].views[0].text = obj.content;
				this.posterJson.views[1].views[3].views[1].text = 'http://limsapi.gzhbcss.com/test?aid=' + obj.id;
			}
			uni.showLoading({
				title: '正在生成海报',
				icon: 'loading',
			});
			setTimeout(() => {
				// 需要延迟，不然会报错
				this.renderPoster();
			}, 1000);
		},
		data() {
			return {
				posterIsShow: false,
				pictureImage: '',
				posterJson: {
					css: {
						width: '750rpx',
						paddingBottom: '40rpx',
						background: 'linear-gradient(,#000 0%, #2698fb 100%)'
					},
					views: [ // 这里配置了多个视图元素，包括图片、文本和容器，每个都有自己的CSS样式
						{
							type: 'view',
							css: {
								display: 'flex',
								marginRight: '40rpx',
								alignItems: 'center',
							},
							views:[
								{
									src: '',
									type: 'image',
									css: {
										background: '#fff',
										objectFit: 'cover',
										marginLeft: '40rpx',
										marginTop: '40rpx',
										width: '84rpx',
										border: '2rpx solid #fff',
										boxSizing: 'border-box',
										height: '84rpx',
										borderRadius: '50%'
									}
								},
								{
									type: 'view',
									css: {
										flex: '1',
										marginTop: '40rpx',
										paddingLeft: '20rpx',
									},
									views:[
										{
											text: '',
											type: 'text',
											css: {
												display: 'inline-block',
												paddingBottom: '10rpx',
												color: '#fff',
												lineClamp: 1,
												fontSize: '32rpx',
												fontWeight: 'bold'
											},
										},
										{
											text: '特来邀请，期待您的参与',
											type: 'text',
											css: {
												display: 'block',
												color: 'rgba(255,255,255,.7)',
												fontSize: '24rpx'
											}
										}
									]
								}
							]
						},
						{
							css: {
								marginLeft: '40rpx',
								marginTop: '30rpx',
								padding: '32rpx',
								boxSizing: 'border-box',
								background: '#fff',
								borderRadius: '16rpx',
								width: '670rpx',
								boxShadow: '0 20rpx 58rpx rgba(0,0,0,.15)'
							},
							views: [
								{
									src: '',
									type: 'image',
									css: {
										objectFit: 'cover',
										objectPosition: '50% 50%',
										width: '606rpx',
										height: '606rpx'
									}
								},
								// {
								// 	css: {
								// 		marginTop: '32rpx',
								// 		color: '#2698fb',
								// 		fontWeight: 'bold',
								// 		fontSize: '28rpx',
								// 		lineHeight: '1em'
								// 	},
								// 	views: [{
								// 			text: '￥',
								// 			type: 'text',
								// 			css: {
								// 				verticalAlign: 'bottom'
								// 			}
								// 		},
								// 		{
								// 			text: '39',
								// 			type: 'text',
								// 			css: {
								// 				verticalAlign: 'bottom',
								// 				fontSize: '58rpx'
								// 			}
								// 		},
								// 		{
								// 			text: '.39',
								// 			type: 'text',
								// 			css: {
								// 				verticalAlign: 'bottom'
								// 			}
								// 		},
								// 		{
								// 			text: '￥59.99',
								// 			type: 'text',
								// 			css: {
								// 				verticalAlign: 'bottom',
								// 				paddingLeft: '10rpx',
								// 				fontWeight: 'normal',
								// 				textDecoration: 'line-through',
								// 				color: '#999999'
								// 			}
								// 		}
								// 	],

								// 	type: 'view'
								// },
								{
									css: {
										marginTop: '30rpx',
										marginRight: '32rpx',
										fontSize: '26rpx',
									},
									views: [
										{
										text: '',
										type: 'text',
										css: {
											color: '#2698fb',
											border: '1rpx solid #2698fb',
											padding: '10rpx 16rpx 4rpx 16rpx',
											fontSize: '24rpx'
										}
									}],

									type: 'view'
								},
								{
									css: {
										marginTop: '32rpx',
										marginBottom: '32rpx',
										color: '#999999',
										fontSize: '28rpx',
										lineHeight: '1em',
									},
									views: [
										{
											text: '',
											type: 'text',
											css: {
												verticalAlign: 'bottom'
											}
										},
										{
											text: '\u0020至\u0020',
											type: 'text',
											css: {
												verticalAlign: 'bottom'
											}
										},
										{
											text: '',
											type: 'text',
											css: {
												verticalAlign: 'bottom'
											}
										}
									],
									type: 'view'
								},
								{
									css: {
										marginTop: '10rpx',
										display: 'flex',
									},
									views: [
										{
											text: '',
											type: 'text',
											css: {
												paddingRight: '32rpx',
												overflow: 'hidden',
												marginTop: '16rpx',
												boxSizing: 'border-box',
												lineClamp: 2,
												color: '#333333',
												lineHeight: '48rpx',
												fontSize: '30rpx',
												width: '478rpx'
											}
										},
										{
											text: '',
											type: 'qrcode',
											css: {
												width: '128rpx',
												height: '128rpx'
											}
										}
									],
									type: 'view'
								}
							],
							type: 'view'
						}
					]
				}
			};
		},
		methods: {
			/**
			 * 绘制海报成功的回调函数
			 * @param {string} e 生成的海报图片数据URL
			 * @summary 绘制海报成功后，将海报显示出来，并隐藏加载提示。
			 */
			painterSsuccess(e) {
				console.log('painterSsuccess');
				this.posterIsShow = true;
				this.pictureImage = e;
				uni.hideLoading();
			},
			renderPoster() {
				this.$refs.posterRef.render(this.posterJson); // Assuming you have a ref named 'posterRef'
			},
			submitReport() {
				wx.reportEvent('wxdata_order_status', {
					spu_id: 'demo',
					spu_name: 'demo',
					price_original: 100,
					price_current: 100,
					sku_count: 100, // 其他参数自行补全
				});
			}
		}
	}
</script>

<style lang="scss">
	.a{
		display: flex;
	}
</style>